<template>
    <div class="">
        <div class="qiye" v-if="(saveRoleName == '市级管理员')&&(saveRoleName == '区县管理员')">
            <div class="intro">
                <div class="title">单位分布概况</div>
                <div class="ben">本年</div>
            </div>
            <div class="danwei">数量(个)</div>
            <div v-if="saveRoleName == '市级管理员'" ref="pieChartX" style="width: 36rem; height: 30rem;margin: 0 auto;"></div>
            <div v-if="saveRoleName == '区县管理员'" ref="pieChartY" style="width: 36rem; height: 30rem;margin: 0 auto;"></div>
        </div>
        <div class="hangye" v-if="zdcyList.length">
            <div class="intro">
                <div class="title">行业分布概况</div>
            </div>
            <div class="dv1">
                <div class="menu-item" v-for="(item, index) of zdcyList" :key="index">
                    <div class="count">{{ item.fullName }}</div>
                    <div class="money">{{ item.value }}</div>
                </div>
                <div class="dashx"></div>
            </div>
            <div class="pie-box" v-if="chartsbtData.length">
              <div class="zztbg">
                <!-- <div class="lui-inner1" style="height: 10%;"></div> -->
                <img class="zzt" src="@/assets/images/ezzt.png" alt="">
              </div>
              <div class="chartsdv">
                <div class="top10">（前10行业情况）</div>
                <div class="chart-shuju" v-for="(item, index) of chartsbtData" :key="index">
                    <div class="box1">
                      <div class="titlecr" :style="{background: item.color}"></div>
                      <div class="titlep1">{{item.title}}</div>
                    </div>
                    <div class="box2">
                      <div class="titlep">{{item.value}}家</div>
                      <div class="titlep2">{{item.percent*100}}%</div>
                    </div>
                </div>
              </div>
          </div>
        </div>
    </div>
  </template>
   
  <script setup>
  import { onMounted, ref } from 'vue';
  import { getCompanyFbgk,getzdcy,gethyfbgk } from '@/api/company';
  import * as echarts from 'echarts';

  const saveRoleName = ref('')
  saveRoleName.value = localStorage.getItem('myRoleName')
  console.log('saveRoleName',saveRoleName);
  if(saveRoleName.value == '市级管理员'){
    getCompanyFbgkDetail()
    setTimeout(()=>{
      chartPieCanvasX()
    },1000)
  }else if(saveRoleName.value == '区县管理员'){
    getCompanyFbgkDetail2()
    setTimeout(()=>{
      chartPieCanvasY()
    },1000)
  }
   
  const pieChartX = ref(null);
  var chartsDataList = []
  var chartsAddressList = []
  async function getCompanyFbgkDetail() {
    const { code, data } = await getCompanyFbgk({
      type: '1'
    });
    if(code === 200) {
      data.forEach(item=>{chartsDataList.push(item.value)})
      data.forEach(item=>{chartsAddressList.push(item.title)})
      console.log('chartsDataList:',chartsDataList);
      console.log('chartsAddressList:',chartsAddressList);
    }
  }
 
  const chartPieCanvasX = ()=>{
    const chartInstance = echarts.init(pieChartX.value);
   const option = {
    xAxis: {
      data: ['海陵区','高港区', '姜堰区', '兴化区', '靖江区', '泰兴区'],
      // data: chartsAddressList,
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: chartsDataList,
        barWidth: '36%',
        color: '#34A8FE'
      }
    ]
  };
    chartInstance.setOption(option);
  }

  const pieChartY = ref(null);
  var chartsDataList2 = []
  var chartsAddressList2 = []
  async function getCompanyFbgkDetail2() {
    const { code, data } = await getCompanyFbgk({
      type: '2'
    });
    if(code === 200) {
      data.forEach(item=>{chartsDataList2.push(item.value)})
      data.forEach(item=>{chartsAddressList2.push(item.title)})
      console.log('chartsDataList2:',chartsDataList2);
      console.log('chartsAddressList2:',chartsAddressList2);
    }
  }

  const chartPieCanvasY = ()=>{
    const chartInstance = echarts.init(pieChartY.value);
  //  const option = {
  //   yAxis: {
  //     data: chartsAddressList2,
  //     // data: ['海陵区','高港区', '姜堰区', '兴化区', '靖江区', '泰兴区'],
  //     axisLabel: {
  //     fontSize: 7
  //   }
  //   },
  //   xAxis: {},
  //   series: [
  //     {
  //       type: 'bar',
  //       // data: [2, 0, 0, 0, 0, 0],
  //       data: chartsDataList2,
  //       barWidth: '36%',
  //       color: '#34A8FE'
  //     }
  //   ]
  // };

  const option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    axisLine:{
      show:false
    },
    axisTick:{
      show:false
    },
    axisLabel:{
      show:false,
    },
    data: chartsAddressList2
  },
  series: [
    {
      type: 'bar',
      barGap: 0,
      data: chartsDataList2,
      barWidth:40,
      label: {
        show: true,
        fontSize:12,
        position: [10, 10],
        formatter: '{b}',
      },

    },
    {
      type: 'bar',
      data: chartsDataList2,
      barWidth:20,
      label: {
        show: true,
        position: 'right',
      },

    }
  ],

  };
    chartInstance.setOption(option);
  }


  //重点产业
  const zdcyList = ref([])
  async function getzdcyDetail() {
    const { code, data } = await getzdcy();
    if(code === 200) {
      zdcyList.value = data
      console.log('zdcyList.value:',zdcyList.value);
    }
  }

  //行业分布概况
  const chartsbtData = ref([])
  async function gethyfbgkDetail() {
    const { code, data } = await gethyfbgk();
    if(code === 200) {
      chartsbtData.value = data
      chartsbtData.value[0].color = "#FED339";
      chartsbtData.value[1].color = "#FF9534";
      chartsbtData.value[2].color = "#7948EA";
      chartsbtData.value[3].color = "#FE4844";
      chartsbtData.value[4].color = "#D141F0";
      chartsbtData.value[5].color = "#3193F5";
      chartsbtData.value[6].color = "#43E099";
      chartsbtData.value[7].color = "#AAACC3";
      chartsbtData.value[8].color = "#C9CBE2";
      chartsbtData.value[9].color = "#FED338";
      console.log('chartsbtData.value:',chartsbtData.value);
    }
  }
   
  onMounted(() => {
    getzdcyDetail()
    gethyfbgkDetail()
  });
  </script>

<style lang="scss" scoped>
.intro{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ben{
    width: 7.6rem;
    height: 2.8rem;
    line-height: 2.8rem;
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #D2DCE7;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
}
.qiye,.hangye{
    background: #fff;
    padding: 1rem;
}
.qiye{
  margin-bottom: 2rem;
}
.title{
    font-size: 1.8rem;
    font-weight: 700;
}
.danwei{
    font-size: 1.2rem;
    font-weight: 400;
    color: #B0B0B0;
    position: relative;
    top: 3.5rem;
    left: 0.5rem;
}

.dv1{
  display: flex;
  flex-wrap: wrap;   
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0.5rem;
  border-radius: 0.4rem;
  background: #F3F9FE;
  margin-top: 2rem;

  .menu-item{
    text-align: center;
    width: 49%;
    
    .count{
      font-size: 1.3rem;
      font-weight: 400;
      color: #666666;
      margin-bottom: 0.5rem;
    }
    .money{
      color: #FC3B3E;
      font-size: 1.8rem;
      font-weight: 700;
      text-align: center;
    }
  }
  .menu-item:nth-child(odd){
    border-right: 1px dashed #2A82E4;
  }

  // .dashx{
  //   width: 0.1rem;
  //   height: 4rem;
  //   border-left: 1px dashed #2A82E4;
  // }
}
.dv2{
  margin-top: 0;
}

.pie-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chartsdv{
  width: 70%;

  .top10{
    font-size: 1.2rem;
    font-weight: 400;
    color: #999999;
    text-align: right;
    margin: 0.5rem 0 1rem;
  }

.chart-shuju{
  margin: 0 auto 0.9rem;
  width: 20rem;

  .box1{
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .titlecr{
      width: 0.8rem;
      height: 0.8rem;
      // margin-bottom: 1.6rem;
      border-radius: 50%;
    }
    .titlep1{
      font-size: 1.2rem;
      font-weight: 400;
      color: #D1D1D1;
      text-align: center;
      // margin-bottom: 1.6rem;
      margin-left: 0.4rem;
      // width: 6.5rem;
      text-align: left;
    }
  }
  .box2{
    display: flex;
    justify-content: space-between;
    align-items: center;

    .titlep{
      font-size: 1.4rem;
      font-weight: 700;
      color: #6D6D6D;
      text-align: center;
      // margin-bottom: 1.6rem;
      // width: 4.5rem;
      text-align: center;
    }
    .titlep2{
      font-size: 1.2rem;
      font-weight: 700;
      color: #333333;
      text-align: center;
      // width: 5rem;
      text-align: center;
    }
  }
}
}

.zztbg{
  width: 5rem;
  margin-top: 3rem;

  .zzt{
    width: 5rem;
  }
}



  </style>